<template>
  <div class="shop-contianer">
       <ul class="shop-list">
          <li class="shop-li" v-for="(shop,index) in shops" :key="index" @click="$router.push('/shop')">
              <a>
                  <div class="flex">
                      <div class="shop-left">
                        <img :src="baseImgUrl + shop.image_path" alt="">
                    </div>
                    <div class="shop-right">
                        <section class="shop-detail-head">
                            <h4 class="shop-detail-title">{{shop.name}}</h4>

                        </section>
                        <section class="shop-detail-body">
                            <section class="shop-detail-left">
                                <Star :score="shop.rating" :size="24"/>
                                <div class="rating_section">
                                    {{shop.rating}}
                                </div>
                                <div class="order_section">
                                    月售{{shop.recent_order_num}}单
                                </div>
                            </section>
                            <section class="shop_rating_order_right">
                                <span class="delivery_style delivery_right">外卖</span>
                            </section>
                        </section>
                        <section class="shop_distance">
                            <p>
                                <span>￥{{shop.float_minimum_order_amount}}起送</span>
                                <span>/</span>
                                <span>配送费￥{{shop.float_delivery_fee}}</span>
                            </p>
                        </section>
                    </div>
                  </div>

              </a>
          </li>
      </ul>
      
  </div>
</template>

<script>
import Star from '../../components/Start/Start.vue'
import {mapState} from 'vuex'
export default {
    components:{
        Star
    },
    data () {
        return {
            baseImgUrl:'http://cangdu.org:8001/img/'      
        }
    },
    computed:{
        ...mapState(['shops'])
    }
}
</script>

<style lang="less" scoped>
.shop-contianer{
    margin-bottom: 50px;
    .shop-list{
        overflow-x: hidden;
        overflow-y: scroll;
       .shop-li{
           border-bottom: 1px solid lightgray;
           width: 100%;
           a{
               clear: both;
               display: block;
               box-sizing: border-box;
               padding: 15px 8px;
               width: 100%;
           }
           .flex{
               display: flex;
               .shop-left{
               
               box-sizing: border-box;
               width: 23%;
               height: 75px;
               padding-right: 10px;
               img{
                   display: block;
                   width: 100%;
                   height: 100%;
               }
           }
           .shop-right{
               
               width: 77%;
               .shop-detail-head{
                   padding-bottom: 8px;
                   width: 100%;
                   .shop-detail-title{
                       padding-bottom: 8px;
                       float: left;
                        width: 100%;
                        color: #333;
                        font-size: 16px;
                        line-height: 16px;
                        font-weight: 700;
                        &::before{
                            content: '品牌';
                            display: inline-block;
                            font-size: 11px;
                            line-height: 11px;
                            color: #333;
                            background-color: #ffd930;
                            padding: 2px 2px;
                            border-radius: 2px;
                            margin-right: 5px;
                        }
                   }
               }
               .shop-detail-body{
                   width: 100%;
                   margin-top: 8px;
                   margin-bottom: 8px;
                   display: flex;
                   justify-content: space-between;
                   .shop-detail-left{
                       display: flex;
                       .rating_section{
                           color: #ffd930;
                           margin-left: 5px;
                           font-weight: 400px;
                       }
                       .order_section{
                           margin-left: 5px;

                       }
                   }
                   .shop_rating_order_right{
                       margin-right: 8px;
                       
                       .delivery_style{
                           background-color: lightseagreen;
                           color: green;
                           border-radius: 2px;
                       }
                   }
               }
           }
           }
       } 
    }
}
</style>